<script setup lang="ts">
import { ref, reactive } from 'vue'
import axios from 'axios';

const rentRecord = ref();

const rentRecordRequest = () => {
    axios.get('/api/appointment/showRentRecordInfo', { params: { username: sessionStorage.username } }).then(res => {
        rentRecord.value = res.data.data;
        if (rentRecord.value.length == 0) {
            alert('暂无预定信息')
        }
    }).catch((err) => {
        console.log(err);
    })
}
rentRecordRequest()
// 控制弹出层是否显示和显示的图片
const show = reactive({ value: false, image: '' })
// 修改订单状态
const finshState = (appointmentid: number) => {
    const sure = confirm("你确定完成订单吗?");
    if (sure) {
        axios.get('/api/appointment/updateState', { params: { appointmentid: appointmentid } }).then(res => {
            if (res.data.code == 200) {
                window.location.reload();
            }
        })
    }
}

</script>

<template>
    <div class="rentRecord">
        <div class="container" v-for="rentRecordInfo in rentRecord">
            <div class="showInfo">
                <van-image width="4rem" height="4rem" radius="1rem"
                    :src="'/storage/images/' + rentRecordInfo.dressname+'.jpg'"
                    @click="show.value = true,show.image = rentRecordInfo.dressname" />
            </div>
            <div class="rentInfo">
                <span>{{ rentRecordInfo.dressname }}</span>
                <span>{{ rentRecordInfo.appointmenttime }}</span>
            </div>
            <div class="condition">
                <span>订单状态</span>
                <span>{{ rentRecordInfo.state }}</span>
            </div>
            <div class="confirm">
                <van-button type="primary" round v-if="rentRecordInfo.state == '订单已完成'" disabled>确定完成</van-button>
                <van-button type="primary" round @click="finshState(rentRecordInfo.appointmentid)" v-else>确认完成
                </van-button>
            </div>
        </div>
    </div>

    <van-popup v-model:show="show.value" :style="{ width: '15rem', height: '15rem', }" round closeable
        close-icon="close">
        <van-image width="15rem" height="15rem" :src="'/storage/images/' + show.image+'.jpg'" />
    </van-popup>
</template>

<style scoped lang="scss">
.rentRecord {
    margin: 0.2rem;
    margin-top: 3.5rem;
    width: calc(100% - 0.4rem);
    max-height: calc(100% - 6.5rem);
    position: absolute;
    overflow: scroll;

    .container {
        background-color: rgba(182, 175, 175, 0.4);
        width: 100%;
        height: 4rem;
        border-radius: 1rem;
        display: grid;
        grid-template-columns: 20% 30% 25% 25%;
        margin-top: 0.5rem;

        div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-left: 0.2rem;

            span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
</style>